'use client';

import { useState } from 'react';
import { useModel } from '../../store';

export default function Food() {
  // 使用我们封装的useModel hook来访问global model
  const { state, dispatch } = useModel('global');
  
  // 本地计数状态
  const [localCount, setLocalCount] = useState(0);

  // 增加全局计数
  const incrementGlobalCount = () => {
    dispatch({
      type: 'global/setUser',
      payload: { ...state.user, count: (state.user?.count || 0) + 1 }
    });
  };

  // 增加本地计数
  const incrementLocalCount = () => {
    setLocalCount(prev => prev + 1);
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4">
        <div className="bg-white rounded-lg shadow-md p-6 max-w-2xl mx-auto">
          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">食品分类页面</h1>
          
          <div className="space-y-8">
            {/* 全局计数器 */}
            <div className="border border-gray-200 rounded-lg p-6">
              <h2 className="text-xl font-semibold text-gray-700 mb-4">全局计数器</h2>
              <p className="text-gray-600 mb-4">
                当前全局计数: <span className="font-bold text-blue-600">{state.user?.count || 0}</span>
              </p>
              <p className="text-sm text-gray-500 mb-4">
                此计数器状态保存在Redux全局状态中，页面刷新后仍会保留
              </p>
              <button 
                onClick={incrementGlobalCount}
                className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200"
              >
                增加全局计数
              </button>
            </div>

            {/* 本地计数器 */}
            <div className="border border-gray-200 rounded-lg p-6">
              <h2 className="text-xl font-semibold text-gray-700 mb-4">本地计数器</h2>
              <p className="text-gray-600 mb-4">
                当前本地计数: <span className="font-bold text-green-600">{localCount}</span>
              </p>
              <p className="text-sm text-gray-500 mb-4">
                此计数器状态保存在组件本地状态中，页面刷新后会重置
              </p>
              <button 
                onClick={incrementLocalCount}
                className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200"
              >
                增加本地计数
              </button>
            </div>

            {/* 说明 */}
            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
              <p className="text-yellow-700">
                <span className="font-bold">说明:</span> 这个页面演示了如何在客户端组件中使用我们封装的Redux功能。
                全局计数器使用了Redux状态管理，而本地计数器使用了React的useState。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}